<script setup>
import { ref } from 'vue'
import api from '@/api'
import { Message, useFormItem } from '@arco-design/web-vue'

const props = defineProps(['modelValue', 'width', 'height'])
const emit = defineEmits(['update:modelValue'])
const { mergedDisabled, eventHandlers } = useFormItem()

const progress = ref(100)

const uploadRequest = async (option) => {
  try {
    progress.value = 0
    const res = await api.post('oss/url', {
      filename: option.fileItem.name,
      dir: 'image',
    })
    let data = new FormData()
    data.append('key', res.data.key)
    data.append('OSSAccessKeyId', res.data.id)
    data.append('policy', res.data.policy)
    data.append('signature', res.data.signature)
    data.append('file', option.fileItem.file)
    const xhr = new XMLHttpRequest()
    xhr.open('POST', res.data.host, true)
    xhr.upload.onprogress = (e) => {
      progress.value = Math.floor((e.loaded / e.total) * 100)
    }
    xhr.onerror = () => {
      progress.value = 100
      Message.error('上传失败!')
    }
    xhr.onload = async () => {
      progress.value = 100
      if (xhr.status !== 204) {
        Message.error('上传失败!')
        return
      }
      emit('update:modelValue', res.data.url)
      eventHandlers.value?.onInput?.(res.data.url)
    }
    xhr.send(data)
  } catch (error) {
    progress.value = 100
    console.error(error)
    Message.error('上传失败!')
  }
}

const beforeUpload = (file) => {
  Message.clear()
  if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
    Message.error('只允许上传jpg、png、gif格式图片！')
    return false
  } else if (file.size > 1024 * 1024) {
    Message.error('图片大小不能超过 1MB!')
    return false
  }
  return true
}
</script>

<template>
  <a-upload
    :custom-request="uploadRequest"
    @before-upload="beforeUpload"
    :show-file-list="false"
    class="upload"
    :style="{ width: width, height: height }"
  >
    <template #upload-button>
      <div
        class="upload-course-image"
        :style="{ width: width, height: height }"
      >
        <template v-if="props.modelValue">
          <img :src="props.modelValue" />
          <div class="arco-upload-list-picture-mask">
            <IconEdit />
          </div>
        </template>

        <div class="arco-upload-picture-card" v-else>
          <div class="arco-upload-picture-card-text">
            <IconPlus />
          </div>
        </div>

        <div v-if="progress < 100" class="progress">上传中 {{ progress }}%</div>
      </div>
    </template>
  </a-upload>
</template>

<style lang="scss" scoped>
// .upload {
//   width: 100%;
// }
.upload-course-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    max-width: 100%;
    max-height: 100%;
    display: block;
  }

  .arco-upload-list-picture-mask {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
  }

  .arco-upload-picture-card {
    width: 100%;
    height: 100%;
  }

  .progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
